import { LoaderDemos, LoadingOverlayDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Loader);

## Usage

`Loader` component supports 3 types of loaders: `oval`, `bars` and `dots` by default. All
loaders are animated with CSS for better performance.

<Demo data={LoaderDemos.configurator} />

## Size prop

You can pass any valid CSS values and numbers to `size` prop. Numbers are treated as px, but
converted to [rem](/styles/rem). For example, `size={32}` will produce
`--loader-size: 2rem` CSS variable.

<Demo data={LoaderDemos.size} />

## Adding custom loaders

`Loader` component is used in other components ([Button](/core/button), [ActionIcon](/core/action-icon), [LoadingOverlay](/core/loading-overlay), etc.).
You can change loader type with [default props](/theming/default-props) by setting `type`.
You can also add a custom CSS or SVG loader with `loaders` [default prop](/theming/default-props).

### Custom CSS only loader

Note that in order for `size` and `color` props to work with custom loaders, you need to
use `--loader-size` and `--loader-color` CSS variables in your loader styles.

<Demo data={LoaderDemos.cssLoader} />

### Custom SVG loader

It is recommended to use CSS only loaders, as SVG based animations may have the following issues:

- High CPU usage – loader may look glitchy on low-end devices
- Loader animation may not start playing until js is loaded – user may see static loader

In your SVG loader, you need to use `--loader-size` and `--loader-color` variables the same
way as in CSS only custom loader in order for `size` and `color` props to work. Usually,
you would need to set `width` and `height` to `var(--loader-size)` and `fill`/`stroke` to
`var(--loader-color)`.

<Demo data={LoaderDemos.customType} />

## children prop

`Loader` supports `children` prop. If you pass anything to `children`, it will be rendered
instead of the loader. This is useful when you want to control `Loader` representation
in components that use `loaderProps`, for example [Button](/core/button/), [LoadingOverlay](/core/loading-overlay/), [Dropzone](/x/dropzone/).

<Demo data={LoadingOverlayDemos.customLoader} />
